define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');
  
  var util = require('hy5b/frontend/util')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);
    
    measureByCanvas($app)
    measureByHTML($app)
    
    $('#testAgine').click(function() {
      measureByCanvas($app)
      measureByHTML($app)
    })
    
  }
  
  var textStyle = {
    fontFamily: 'Hanzel Bold',
    fontSize: '50px',
    fontWeight: 'normal',
    fontStyle: 'italic',
    letterSpacing: 1
  }
  
  var text = '2064'
  
  function measureByCanvas($app) {
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    $app.append(canvas)
    
    ctx.font = util.combineFont(textStyle);
    
    $app.append(jsonview(ctx.measureText(text)))
    ctx.fillText(text, 0, 100)
  }
  
  function measureByHTML($app) {
    let { letterSpacing, fontFamily, fontSize, fontWeight, fontStyle } = textStyle
    fontWeight = fontWeight ? 'bold' : 'normal'
    fontFamily = fontFamily || 'Microsoft YaHei,PingFang SC'
    fontStyle = fontStyle ? 'italic' : 'normal'
    
    let hideEl = document.createElement('div')
    console.log(hideEl.offsetWidth)
    hideEl.innerText = text
    hideEl.style.cssText += 
      `;opacity:1;display:table-cell;/*position:fixed;top:0;left:0;*/will-change: left;
      white-space:nowrap;font-family:${fontFamily};font-size:${fontSize};
      font-weight:${fontWeight};font-style:${fontStyle};letter-spacing:${letterSpacing}px`;
    $app.append(hideEl)
    
    setTimeout(function() {
      $app.append(jsonview(hideEl.getBoundingClientRect()))
    }, 100)
  }

  return main;
})
